<template>
	<l-page class="page-card org">
		<el-form slot="header" :inline="true" label-width="75px">
			<el-form-item label="用户ID:">
				<el-input v-model.trim="filterText" clearable maxlength="6" placeholder="请输入用户ID" show-word-limit @clear="filter"> </el-input>
			</el-form-item>
			<el-form-item label="手机号码:">
				<el-input v-model.trim="phone" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit @clear="filter"> </el-input>
			</el-form-item>
			<el-form-item>
				<div class="page-search-btn">
					<el-button icon="el-icon-search" type="primary" @click="filter">搜索</el-button>
					<el-button icon="el-icon-refresh" type="primary" plain @click="reset">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
		<div class="flex">
			<div class="flex-1 mr-[215px]">
				<el-tree
					v-show="dataList.length == 0"
					:key="menuKey"
					ref="tree"
					:filter-node-method="filterNode"
					:indent="0"
					:load="loadNode"
					:props="props"
					class="tree-line"
					empty-text="暂无数据"
					lazy
					@node-click="treeClick"
				>
					<span slot-scope="{ data }" :class="{ hasline: data.leaf }" class="custom-tree-node">
						<img v-if="!data.leaf" alt="" src="@/assets/images/er.png" />
						<img v-else alt="" src="@/assets/images/yi.png" />
						<span>用户ID:</span>
						<span style="padding: 0 5px">{{ data.uuid }}</span>
						<span>{{ data.userLevel }}</span>
					</span>
				</el-tree>
				<el-tree
					v-show="dataList.length > 0"
					ref="tree"
					:data="dataList"
					:default-expand-all="true"
					:indent="0"
					:load="loadNode"
					:props="props2"
					class="tree-line"
					empty-text="暂无数据"
					@node-click="treeClick"
				>
					<span
						slot-scope="{ data }"
						:class="{
							red: data.uuid == filterText || data.username == phone,
							hasline: !data.children,
						}"
						class="custom-tree-node"
					>
						<img v-if="!data.leaf" alt="" src="@/assets/images/er.png" />
						<img v-else alt="" src="@/assets/images/yi.png" />
						<span>用户ID:</span>
						<span style="padding: 0 5px">{{ data.uuid }}</span>
						<span>{{ data.userLevel }}</span>
					</span>
				</el-tree>
			</div>
			<el-card class="!w-[375px] !h-[297px] org__card" :body-style="{ padding: '0 !important' }">
				<div class="mb-[25px] text-center h-[40px] text-[14px] text-white flex items-center justify-center org__card__title">个人信息</div>
				<el-form label-width="75px" class="!pl-[25px]">
					<el-form-item label="用户ID" class="!mb-[16px]">
						<el-input v-model.trim="form.id" readonly class="ml-[20px] !w-[225px] !h-[40px]"></el-input>
					</el-form-item>
					<el-form-item label="用户名称" class="!mb-[16px]">
						<el-input v-model.trim="form.username" class="ml-[20px] !w-[225px] !h-[40px]" readonly></el-input>
					</el-form-item>
					<el-form-item label="推荐人ID" class="!mb-[16px]">
						<el-input v-model.trim="form.referrerUuid" class="ml-[20px] !w-[225px] !h-[40px]" readonly></el-input>
					</el-form-item>
					<el-form-item label="用户身份" class="!mb-[0px]">
						<el-input v-model.trim="form.userLevel" class="ml-[20px] !w-[225px] !h-[40px]" readonly></el-input>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
	</l-page>
</template>

<script>
import { getGroupDownlist, getGrouplist, search } from '@/api/mall/user';

export default {
	name: 'Organization',
	components: {},
	data() {
		return {
			menuKey: 1,
			dataList: [],
			id: '',
			loading: false,
			props: {
				label: 'label',
				children: 'zones',
				isLeaf: 'leaf',
			},
			props2: {
				label: 'label',
				children: 'children',
				isLeaf: 'leaf',
			},
			filterText: '',
			phone: '',
			list: [],
			form: {},
		};
	},
	methods: {
		// 重置
		reset() {
			++this.menuKey;
			this.filterText = '';
			this.phone = '';
			this.dataList = [];
			this.form = {};
		},
		filter() {
			if (this.filterText || this.phone) {
				search({
					uuid: this.filterText,
					mobile: this.phone,
				}).then((res) => {
					if (res.code === 200) {
						// cons
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].isLeaf = false;
						}

						this.dataList = res.data;
					}
				});
			} else {
				this.dataList = [];
			}
		},
		treeClick(data) {
			this.form = {
				username: data.username,
				id: data.uuid,
				referrerUuid: data.referrerUuid,
				userLevel: data.userLevel,
			};
		},
		filterNode(value, data) {
			if (!value) return true;
			if (data.id) {
				return data.id == value;
			}
		},
		loadNode(node, resolve) {
			if (node.level === 0) {
				getGrouplist().then((res) => {
					this.list = res;
					return resolve(res);
				});
			}
			if (node.data && node.data.uuid) {
				getGroupDownlist({ id: node.data.uuid }).then((res) => {
					res.map((v) => {
						v.leaf = !v.hasKids;
					});
					return resolve(res);
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.org {
	&__card {
		border: none;
		box-shadow: 0 3px 15px 1px rgba(0, 0, 0, 0.1);
		border-radius: 12px;
		::v-deep {
			.el-input__inner {
				background-color: #f8f9fb;
				border: 1px solid #e2e6f0;
			}
		}
		&__title {
			background: url('~@/assets/images/org.png') no-repeat;
			background-size: 100% 100% !important;
		}
		.el-card__body {
			border-radius: 12px;
			padding: 0 !important;
		}
	}
}
.red {
	color: #f14a46;
}

.app-container {
	min-height: calc(100vh - 85px);
}

.grid-content {
	display: flex;
	justify-content: space-between;
}
.app-container {
	//min-height: 100vh;
	background: #ffffff;
	position: relative;
}

.custom-tree-node {
	display: flex;
	align-items: center;
	position: relative;

	&.hasline {
		// ::after{
		//  content: "";
		//  position: absolute;
		//  width: 1px;
		//  height: 100%;
		//  background: #E5E5E5;
		//  left: -3px;
		//  top:-50%;
		// }
		::before {
			content: '';
			position: absolute;
			width: 49px;
			height: 1px;
			background: #e5e5e5;
			left: -46px;
			top: 50%;
		}
	}

	img {
		width: 16px;
		height: 16px;
		display: block;
		flex-shrink: 0;
		margin: 0 8px;
	}
}

::v-deep .is-expanded {
	position: relative;
}

::v-deep .el-tree {
	// width: 1026px;
	height: 450px;
	overflow: scroll;
}

::v-deep .el-tree-node__content {
	height: 28px;
	font-size: 12px;
	line-height: 28px;
}

.el-tree-node__content {
}

::v-deep .el-tree-node__expand-icon {
	transform: none;
	transition: none;
	background: url('~@/assets/images/jia.png') no-repeat center center;
	background-size: 16px 16px;
	color: rgba(0, 0, 0, 0);
	position: relative;
}

::v-deep .expanded {
	background: url('~@/assets/images/jian.png') no-repeat center center;
	background-size: 16px 16px;
	transform: none;
	transition: none;
	color: rgba(0, 0, 0, 0);
}

::v-deep .is-leaf {
	background: none;
	//background-size: 14px 14px;
	transform: none;
	transition: none;
	color: rgba(0, 0, 0, 0);
}

.tree-line {
	flex: 1;

	::v-deep .el-tree-node {
		position: relative;
		padding-left: 16px; // 缩进量
	}

	::v-deep .el-tree-node__children {
		padding-left: 16px; // 缩进量
	}

	// 竖线
	::v-deep .el-tree-node::before {
		content: '';
		height: calc(100% - 0px);
		width: 1px;
		position: absolute;
		left: -3px;
		top: -14px;
		border-width: 1px;
		border-left: 1px solid #e5e5e5;
	}

	// 当前层最后一个节点的竖线高度固定
	::v-deep .el-tree-node:last-child::before {
		height: 29px; // 可以自己调节到合适数值
	}

	// 横线
	::v-deep .el-tree-node::after {
		content: '';
		width: 24px;
		height: 20px;
		position: absolute;
		left: -3px;
		top: 14px;
		border-width: 1px;
		border-top: 1px solid #e5e5e5;
	}

	// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
	::v-deep & > .el-tree-node::after {
		border-top: none;
	}

	::v-deep & > .el-tree-node::before {
		border-left: none;
	}

	// 展开关闭的icon
	::v-deep .el-tree-node__expand-icon {
		font-size: 16px;
		// 叶子节点（无子节点）
		::v-deep &.is-leaf {
			color: transparent;
			//display: none; // 也可以去掉
		}
	}
}
</style>
